<template>
    <div id="detail-roi-chart" style="width: 100%; min-height: 600px;"></div>
</template>

<script>
import echarts from 'echarts';
let echartsInstance = null;

export default {
    props: ['data'],
    components: {

    },
    data() {
        return {
            loading: false,
            allowFields: {
                roi: '回本率',
            },
            searchTimeout: true,
            xAxis: [],
            yAxis: [],
        }
    },
    computed: {

    },
    watch: {
        data (value) {
            this.xAxis = [];
            this.yAxis = [];
            value.map((v, k) => {
                Object.keys(v).map(field => {
                    if (this.allowFields.hasOwnProperty(field)) {
                        let tmp = (v[field]*100).toFixed(2);
                        this.xAxis.push(v.dataDay.substr(5));
                        this.yAxis.push(tmp);
                    }
                });
            })
            this.setChartOptions();
        }
    },
    methods: {
        setChartOptions() {
            let options = {
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '日期: {b0}<br/>{a0}: {c0}%'  // 显示百分比
                },
                title: {
                    left: 'left',
                    text: '实际ROI',
                },
                toolbox: {
                    feature: {
                        // dataZoom: {
                        //     yAxisIndex: 'none'
                        // },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: true,
                    data: this.xAxis,
                    // inverse: true,// 反转坐标轴
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {  // 显示百分比
                        show: true,
                        interval: 'auto',
                        formatter: '{value} %'
                    },
                    show: true,
                    scale: true,
                    boundaryGap: [0, '100%'],
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    start: 0,
                    end: 100
                }],
                series: [
                    {
                        name: '回本率',
                        type: 'line',
                        smooth: true,
                        data: this.yAxis,
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    formatter: function (a) {
                                        return a.data + "%";
                                    }
                                }
                            }
                        },
                    }
                ]
            };
            echartsInstance.setOption(options);
        },
        initChart() {
            echartsInstance = echarts.init(document.getElementById('detail-roi-chart'));
            echartsInstance.on('click', function (params) {
                console.log(params);
            });
        },
    },
    mounted() {
        this.initChart();
        //  根据窗口大小调整曲线大小
        window.addEventListener("resize", function() {
            echartsInstance.resize();
        });
    },
    created() {

    },
    beforeDestroy() {
        // 销毁时清空图表实例, 清除定时器
        echartsInstance.clear();
        this.searchTimeout = null;
    },
    destroyed() {

    }
}
</script>

<style lang="scss" scoped>

</style>
